<template>
    <div>
        welcome
        <div class="time-box">
            <h5><i class="icon el-icon-time"></i> 现在时间</h5>
            <div class="time-box-now">
                <span class="time-month">{{ getMonth }}</span>
                <span class="time-day">{{ getDay }}</span>
                <div>
                    <div class="time-year">{{ getYear }}</div>
                    <div class="line"></div>
                    <div class="time-hour-minute-second">
                        {{ getTheTime }}
                    </div>
                </div>
            </div>
        </div>

        <Oclock></Oclock>
    </div>
</template>

<script>
import Oclock from '@/components/Oclock.vue';

var nowTime = new Date();
var interval; // 定义全局定时器，用于清除定时器

export default {
    name: 'guide',
    components: { Oclock },
    data() {
        return {
            theTime: nowTime.toTimeString().substring(0, 8)
        };
    },
    computed: {
        getYear: function () {
            return nowTime.getFullYear();
        },
        getMonth: function () {
            return nowTime.getMonth() + 1 > 9
                ? nowTime.getMonth() + 1
                : '0' + (nowTime.getMonth() + 1);
        },
        getDay: function () {
            return nowTime.getDate() > 9
                ? nowTime.getDate()
                : '0' + nowTime.getDate();
        },
        getTheTime: function () {
            return this.theTime;
        }
    },
    created() {
        interval = setInterval(() => {
            let newTime = new Date();
            this.theTime = newTime.toTimeString().substring(0, 8);
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(interval);
    }
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';

.time-box {
    h5 {
        font-size: 1.17rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @theme-text-color-primary;
        line-height: 1.67rem;
    }
    .time-box-now {
        display: flex;
        align-items: center;
        .time {
            &-month,
            &-day {
                width: 3.5rem;
                height: 4rem;
                border-radius: 0.17rem;
                border: 0.08rem solid @theme-text-color-primary;
                font-size: 2.83rem;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: @theme-text-color-primary;
                line-height: 4rem;
                margin-right: 0.42rem;
            }
            &-year {
                width: 46.17rem;
                height: 2.08rem;
                font-size: 1.5rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: @theme-text-color-primary;
                line-height: 2.08rem;
            }
            &-hour-minute-second {
                font-size: 1.17rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: @theme-text-color-primary;
                line-height: 1.67rem;
            }
        }
        .line {
            width: 46.17rem;
            height: 0.17rem;
            background-image: linear-gradient(
                to left,
                #ffffff 0%,
                #2364d9 100%
            );
        }
    }
}
</style>
